<style>
.page {
  text-align: center;
  margin-top: 7px;
}
.page1 {
  text-align: center;
  margin-top: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  table-layout: fixed;
}
.ivu-table-overflowX {
  overflow-x: hidden;
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 12px;
}
.myrole {
  margin-left: 10px;
}
.in1 {
  margin-left: 7px;
}
</style>
<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/main/myInfo">
        <e-icon icon-name="el-icon-s-home"></e-icon>主页
      </BreadcrumbItem>
            <BreadcrumbItem>
        <e-icon icon-name="fa fa-book"></e-icon>教学管理
      </BreadcrumbItem>
      <BreadcrumbItem>
      班级管理
      </BreadcrumbItem>
    </Breadcrumb>

    <Divider />

    <Button type="primary" icon="md-person-add" @click="open">添加班级</Button>

    <Modal
      ref="modal1"
      :loading="isLoading"
      v-model="modal1"
      title="添加班级"
      @on-ok="addClazz('clazzPo')"
      @on-cancel="cancel"
    >
      <Form
        ref="clazzPo"
        :model="clazzPo"
        :rules="ruleValidate"
        :label-width="80"
      >
        <FormItem label="班级代码" prop="code">
          <Input
            clearable
            v-model="clazzPo.code"
            placeholder="请输入班级代码"
          ></Input>
        </FormItem>
        <FormItem label="班级名称" prop="name">
          <Input
            clearable
            v-model="clazzPo.name"
            placeholder="请输入班级名称"
          ></Input>
        </FormItem>

        <FormItem label="班级状态" prop="status">
          <i-switch
            true-color="#13ce66"
            false-color="#ff4949"
            size="large"
            :true-value=0
            :false-value=1
            v-model="clazzPo.status"
          >
            <spa slot="open">正常√</spa>
            <span slot="close">禁用×</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      ref="modal2"
      :loading="isLoading"
      v-model="modal2"
      title="修改班级"
      @on-ok="updateClazz('clazzPo2')"
      @on-cancel="cancel"
    >
      <Form
        ref="clazzPo2"
        :model="clazzPo"
        :rules="ruleValidate2"
        :label-width="80"
      >
        <FormItem label="班级代码" prop="code">
          <Input
            clearable
            v-model="clazzPo.code"
            placeholder="请输入班级代码"
          ></Input>
        </FormItem>
        <FormItem label="班级名称" prop="name">
          <Input
            clearable
            v-model="clazzPo.name"
            placeholder="请输入班级名称"
          ></Input>
        </FormItem>

        <FormItem label="班级状态" prop="status">
          <i-switch
            true-color="#13ce66"
            false-color="#ff4949"
            size="large"
            :true-value="0"
            :false-value="1"
            v-model="clazzPo.status"
          >
            <span slot="open">正常√</span>
            <span slot="close">禁用×</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>

    <Input
      class="in1"
      clearable
      v-model="clazzQo.code"
      placeholder="请输入班级代码"
      style="width: 200px"
    />
    <Input
      class="in1"
      clearable
      v-model="clazzQo.name"
      placeholder="请输入班级名称"
      style="width: 200px"
    />
    <Select
      class="in1"
      v-model="clazzQo.status"
      clearable
      style="width: 200px"
      placeholder="请选择班级状态"
    >
      <Option value="0">正常</Option>
      <Option value="1">禁用</Option>
    </Select>

    <Button class="in1" type="primary" icon="ios-search" @click="selectClazz"
      >搜索</Button
    >
    <Button class="in1" icon="md-close" @click="reset">清除</Button>
    <Table
      style="width: 100%"
      context-menu
      show-context-menu
      class="page1"
      ref="selection"
      border
      :columns="columns1"
      :data="data.records"
      @on-selection-change="checkClazz"
        :loading="loading"
      @on-contextmenu="handleContextMenu"
    >
      <template slot="contextMenu">
        <DropdownItem @click.native="handleContextMenuEdit">修改</DropdownItem>
        <DropdownItem
          @click.native="handleContextMenuDelete"
          style="color: #ed4014"
          >删除</DropdownItem
        >
      </template>
    </Table>
    <Button
      class="page1"
      type="error"
      ghost
      @click="ifDeleteAll"
      icon="ios-trash"
      >删除所选</Button
    >
    <Button
      class="page1"
      type="warning"
      ghost
      @click="disabledCheckClazz"
      icon="ios-switch"
      >注销/恢复所选</Button
    >
    <Page
      class="page"
      :total="data.total"
      :current="data.current"
      :page-size="6"
      :page-size-opts="pagesizeopts"
      @on-change="changePage"
      @on-page-size-change="sizeChange"
      show-elevator
      show-total
      show-sizer
    />
    <Drawer   :closable="false" placement="left" width="640" v-model="value4" >
      <p slot="header">
        <Icon type="ios-information-circle"></Icon>
        <span>班级详情信息</span>
      </p>
    </Drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
        //表格加载
      loading: true,
      //每页展示条数
      pagesizeopts: [6, 10, 15, 20],
      //存放查询班级Vo的信息
      data: {},
      //查询班级的查询条件
      clazzQo: {
        pageSize: 6,
        pageIndex: 1,
      },
      //添加班级确定按钮的一直加载，添加信息不符合要求时不会关闭弹窗
      isLoading: true,
      //添加班级->是否打开弹窗
      modal1: false,
      //修改班级->是否打开弹窗
      modal2: false,
      //添加班级时存储班级的信息
      clazzPo: {},
      //存储多选时班级id
      clazzIdList: [],
      //班级详情页面的style
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px",
      },
      //是否显示班级详情页
      value4: false,
      //右键表格的行数
      contextLine: "",
      //添加班级时的表单验证
      ruleValidate: {
        code: [
          { required: true, message: "班级代码不能为空", trigger: "blur" },
        ],
        name: [
          {
            required: true,
            message: "班级名称不能为空",
            trigger: "blur",
          },
        ],
        // status: [
        //   {
        //     required: true,
        //     message: "班级状态不能为空",
        //   },
        // ],
      },
      //修改班级时的表单验证
      ruleValidate2: {
        code: [
          { required: true, message: "班级代码不能为空", trigger: "blur" },
        ],
        name: [
          {
            required: true,
            message: "班级名称不能为空",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "班级状态不能为空",
          },
        ],
      },
      //班级的表格
      columns1: [
        {
          width: 60,
          type: "selection",
        },
        {
          title: "ID",
          key: "id",
          width: 60,
        },
        {
          title: "班级代码",
          key: "code",
          width: 250,
        },
        {
          title: "班级名称",
          key: "name",
          width: 250,
        },
        {
          title: "班级状态",
          key: "statusShow",
          width: 250,
          align: "center",
          render: (h, params) => {
            const row = params.row;
            return h(
              "i-switch",
              {
                props: {
                  size: "large",
                  trueColor: "#13ce66",
                  falseColor: "#ff4949",
                  value: row.status === 0,
                },
                nativeOn: {
                  click: () => {
                    this.disabledClazz(params.index);
                  },
                },
              },
              [
                h("span", { slot: "open" }, "正常"),
                h("span", { slot: "close" }, "禁用"),
              ]
            );
          },
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let ifStatus;
            if (params.row.status == 0) {
              ifStatus = true;
            } else if (params.row.status == 1) {
              ifStatus = false;
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    icon: "md-glasses",
                  },
                  style: {
                    id: "btn1",
                    marginLeft: "20px",
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    },
                  },
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                    icon: "md-create",
                  },
                  style: {
                    marginLeft: "20px",
                  },
                  on: {
                    click: () => {
                      this.open2(params.index);
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                    icon: "ios-trash-outline",
                  },
                  style: {
                    marginLeft: "20px",
                  },
                  on: {
                    click: () => {
                      this.ifDelete(params.index);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
    };
  },
  created() {
    //页面加载时
    //查询班级
    this.selectClazz();
  },
  methods: {
    //弹出框点取消时
    cancel() {},
    //查询班级
    selectClazz() {
      this.loading = true;
      this.$axios
        .post("/clazz/listPaged", this.clazzQo)
        .then((result) => {
          this.data = result.data.data;
        this.loading  =false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //打开添加班级弹窗
    open() {
      this.modal1 = true;
    },
    //打开修改班级弹窗
    open2(index) {
      this.$axios
        .get("/clazz/details", {
          params: {
            id: this.data.records[index].id,
          },
        })
        .then((result) => {
          this.clazzPo = {};
          this.clazzPo = result.data.data;
          this.modal2 = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加班级
    addClazz(name) {
      this.$refs[name].validate((valid) => {
        //验证输入的班级信息是否正确
        if (valid) {
          this.$axios
            .post("/clazz/addClazz", this.clazzPo)
            .then((result) => {
              if (result.data.code == 0) {
                this.$Message.success({
                  duration: 2.5,
                  background: true,
                  content: "添加成功",
                });
                //插入数据成功更新查询
                this.selectClazz();
                //清空上次保存的clazz
                this.clazzPo = {};
                this.modal1 = false;
              } else {
                this.$Message.error({
                  duration: 2.5,
                  background: true,
                  content: "添加失败",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
        //若验证数据错误，不关闭弹窗
        else {
          setTimeout(() => {
            this.isLoading = false;
            this.$nextTick(() => {
              this.isLoading = true;
            });
          }, 100);
          return;
        }
      });
    },
    //改变页数时
    changePage(e) {
      //变更查询时的页数条件
      this.clazzQo.pageIndex = e;
      this.selectClazz();
    },
    //多选选中班级
    checkClazz(e) {
      //先将选中id设为空，以免重复添加id
      this.clazzIdList = [];
      console.log(e);
      //循环添加id
      e.forEach((element) => {
        this.clazzIdList.push(element.id);
      });
    },

    //弹框问是否删除多选
    ifDeleteAll() {
      if (
        this.clazzIdList !== undefined &&
        this.clazzIdList !== null &&
        this.clazzIdList.length > 0
      ) {
        this.$Modal.confirm({
          title: "警告",
          content: "<p>你真的要删除这些班级么?</p>",
          onOk: () => {
            this.deleteCheckClazz();
          },
          onCancel: () => {},
        });
      } else {
        this.$Message.warning({
          top: 30,
          duration: 2.5,
          background: true,
          content: "您未选择任何班级",
        });
      }
    },
    //删除选中的班级
    deleteCheckClazz() {
      this.$axios
        .post("/clazz/deleteCheckClazz", this.clazzIdList)
        .then((result) => {
          if (result.data.code == 0) {
            this.$Message.success({
              duration: 2.5,
              background: true,
              content: "删除成功",
            });
            //删除成功，更新查询
            this.selectClazz();
            this.clazzIdList= [];
          } else {
            this.$Message.error({
              top: 30,
              duration: 2.5,
              background: true,
              content: "删除失败",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //弹框问是否删除
    ifDelete(index) {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>你真的要删除该班级么?</p>",
        onOk: () => {
          this.remove(index);
        },
        onCancel: () => {},
      });
    },
    //删除单个班级
    remove(index) {
      this.$axios
        .get("/clazz/deleteClazz", {
          params: {
            id: this.data.records[index].id,
          },
        })
        .then((result) => {
          if (result.data.code == 0) {
            this.$Message.success({
              top: 30,
              duration: 2.5,
              background: true,
              content: "删除成功",
            });
            //删除成功，更新查询
            this.selectClazz();
          } else {
            this.$Message.error({
              top: 30,
              duration: 2.5,
              background: true,
              content: "删除失败",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //注销/恢复选中班级
    disabledCheckClazz() {
      if (
        this.clazzIdList !== undefined &&
        this.clazzIdList !== null &&
        this.clazzIdList.length > 0
      ) {
        this.$axios
          .post("/clazz/disabledCheckClazz", this.clazzIdList)
          .then((result) => {
            if (result.data.code == 0) {
              this.$Message.success({
                top: 30,
                duration: 2.5,
                background: true,
                content: "操作成功",
              });
              //删除成功，更新查询
              this.selectClazz();
              this.clazzIdList= [];
            } else {
              this.$Message.error({
                top: 30,
                duration: 2.5,
                background: true,
                content: "操作失败",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$Message.warning({
          top: 30,
          duration: 2.5,
          background: true,
          content: "您未选择任何班级",
        });
      }
    }, //注销/恢复单个班级
    disabledClazz(index) {
      this.$axios
        .get("/clazz/disabledClazz", {
          params: {
            id: this.data.records[index].id,
          },
        })
        .then((result) => {
          if (result.data.code == 0) {
            this.$Message.success({
              top: 30,
              duration: 2.5,
              background: true,
              content: "操作成功",
            });
            //删除成功，更新查询
            this.selectClazz();
          } else {
            this.$Message.error({
              top: 30,
              duration: 2.5,
              background: true,
              content: "操作失败",
            });
          }
        })
        .catch((err) => {
          get;
          console.log(err);
        });
    },
    //班级详情信息
    show(index) {
      this.value4 = true;
      this.$axios
        .get("/clazz/details", {
          params: {
            id: this.data.records[index].id,
          },
        })
        .then((result) => {})
        .catch((err) => {
          console.log(err);
        });
    },
    //修改班级信息
    updateClazz(name) {
      this.$refs[name].validate((valid) => {
        //验证输入班级信息是否正确
        if (valid) {
          this.$axios
            .post("/clazz/updateClazz", this.clazzPo)
            .then((result) => {
              if (result.data.code == 0) {
                this.$Message.success({
                  duration: 2.5,
                  background: true,
                  content: "修改成功",
                });
                //插入数据成功更新查询
                this.selectClazz();
                //清空上次保存的clazz
                this.clazzPo = {};
                this.modal2 = false;
              } else {
                this.$Message.error({
                  duration: 2.5,
                  background: true,
                  content: "修改失败",
                });
              }
              console.log(result.data);
            })
            .catch((err) => {
              console.log(err);
            });
        }
        //若验证数据错误，不关闭弹窗
        else {
          setTimeout(() => {
            this.isLoading = false;
            this.$nextTick(() => {
              this.isLoading = true;
            });
          }, 100);
          return;
        }
      });
    },
    //关闭弹窗时，清除clazzPo信息
    cancel() {
      this.clazzPo = {};
    },
    //右键表格时得到右键表格的位置
    handleContextMenu(row) {
      const index = this.data.records.findIndex(
        (item) => item.name === row.name
      );
      this.contextLine = index;
    },
    //右键修改信息
    handleContextMenuEdit() {
      this.open2(this.contextLine);
    },
    //右键删除班级
    handleContextMenuDelete() {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>你真的要删除该班级么?</p>",
        onOk: () => {
          this.remove(this.contextLine);
        },
        onCancel: () => {},
      });
    },
    //改变页面显示数据大小后
    sizeChange(e) {
      this.clazzQo.pageSize = e;
      this.selectClazz();
    },
    //清除查询条件
    reset() {
      (this.clazzQo = {
        pageSize: this.clazzQo.pageSize,
        pageIndex: 1,
      }),
        this.selectClazz();
    },
  },
};
</script>